<!--
 * @Description: 注册模块
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2021-05-04 21:52:57
 * @LastEditors: lhl
 * @LastEditTime: 2021-05-05 19:48:27
-->
<template>
  <div class="register-wrap">
    <van-nav-bar
      title="注册"
      :right-text="$t('appHeader.selectLanguage')"
      @click-right="onClickRight"
    />
    <van-form @submit="onSubmit">
      <van-field
        v-model="name"
        name="name"
        label="姓名"
        placeholder="请输入姓名"
        :rules="[{ required: true, message: '请输入姓名' }]"
      />
      <van-field
        v-model="username"
        name="username"
        label="账号"
        placeholder="账号"
        :rules="[{ required: true, message: '请输入账号' }]"
      />
      <van-field
        v-model="password"
        name="password"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请输入密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit"> 注册 </van-button>
      </div>
      <van-cell title="" value="登录" is-link to="login" />
    </van-form>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, getCurrentInstance } from 'vue'
  import { useStore } from 'vuex'
  import { useRouter } from 'vue-router'
  export default defineComponent({
    name: 'register',
    setup() {
      const store = useStore()
      console.log(store, 'store')
      const state = reactive({
        name: '',
        username: '',
        password: ''
      })
      const { proxy }: any = getCurrentInstance()
      const router = useRouter()
      console.log(proxy, 'proxy')
      const methods = {
        onClickRight() {
          store.commit('showLangPicker', true)
        },
        onSubmit(values) {
          console.log('submit', values)
          let data = {
            ...values
          }
          proxy.API.registerApi.userRegister(data).then((res) => {
            console.log(res, 'res')
            if (res.code === 200) {
              proxy.$toast('注册成功')
              setTimeout(() => {
                router.push({
                  name: 'my'
                })
                // 去个人中心 然后调用个人信息接口 返回401（没有token 代表没有登录然后再做对应的处理）
              }, 1000)
            }
          })
        }
      }
      return {
        ...toRefs(state),
        ...methods
      }
    }
  })
</script>
<style lang="less" scoped></style>
